<template>
  <div class="login">
    <van-cell-group class="login-form">
      <div class="login_title">
        <span class="title">欢迎登录～</span>
        <sprn class="desc">登录后享受更好的服务体验</sprn>
      </div>
      <van-field v-model="userForm.name" label-width="auto" placeholder="请输入手机号码">
        <template #label>
          <img src="../assets/wode-5@2x.png" class="login-form__icon" />
        </template>
      </van-field>
      <van-field v-model="userForm.code" label-width="auto" placeholder="请输入验证码">
        <template #label>
          <img src="../assets/ziyuan-4@2x.png" class="login-form__icon" />
        </template>
        <template #button>
          <van-button size="small" type="primary" class="login-form__code" @click="getCodeHandler" :disabled="data.codeLoading">
            {{ data.time == 60 ? '发送验证码' : data.time + 'S重新获取' }}
          </van-button>
        </template>
      </van-field>
      <div class="login_footer">
        <div class="right" @click="toRouter('/register')">
          账号注册
        </div>
      </div>
    </van-cell-group>
    <van-button type="parimary" @click="confirmHandler" class="submit-form__btn">登录</van-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'
import { isMobile, ACCESS_TOKEN } from '@/utils/index'
import { LoginCode, Login } from '@/config/api'
import storage from 'store'
import router from '@/config/router'

const userForm = ref({
  type: 'app',
  name: '',
  code: ''
})

const data = ref({
  timer: null,
  time: 60,
  codeLoading: false
})

const getCodeHandler = function() {
  if (!userForm.value.name) {
    showToast('请输入手机号码')
    return
  }
  if (!isMobile(userForm.value.name)) {
    showToast('请输入正确的手机号码')
    return
  }
  clearInterval(data.value.timer)
  data.value.codeLoading = true
  LoginCode({ phone: userForm.value.name })
    .then(() => {
      data.value.timer = setInterval(() => {
        data.value.time--
        if (data.value.time <= 0) {
          clearInterval(data.value.timer)
          data.value.time = 60
          data.value.codeLoading = false
        }
      }, 1000)
    })
    .catch(() => {
      data.value.codeLoading = false
    })
}
const confirmHandler = function() {
  // if (!userForm.value.name) {
  //   showToast('请输入手机号码')
  //   return
  // }
  // if (!isMobile(userForm.value.name)) {
  //   showToast('请输入正确的手机号码')
  //   return
  // }
  if (!userForm.value.code) {
    showToast('请输入短信验证码')
    return
  }
  Login({...userForm.value, phone: userForm.value.name}).then((resp) => {
    storage.set(ACCESS_TOKEN, resp.token)
    router.replace('/')
  })
}

const toRouter = (url) => {
  router.push(url)
}
</script>

<style lang="less" scoped>
/deep/ .van-hairline--top-bottom:after,
.van-hairline-unset--top-bottom:after {
  content: '';
  border: none;
}
/deep/ .van-cell:last-child:after,
.van-cell--borderless:after {
  display: inline-block;
}
/deep/ .van-cell {
  padding: var(--van-cell-vertical-padding) 0;
}
.login {
  height: 100vh;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3.81rem;
  &-form {
    min-width: 8rem;
    &__icon {
      width: 0.45rem;
      height: 0.49rem;
    }
    &__code {
      min-width: 2.33rem;
      height: 0.69rem;
      border: 0.01rem solid var(--color-primary) !important;
      border-radius: 0.35rem;
      font-size: 0.37rem;
      color: var(--color-primary);
      border: none;
      background: transparent;
    }
  }
  .submit-form__btn {
    width: 7.87rem;
    height: 1.15rem;
    background: var(--color-primary);
    border-radius: 0.57rem;
    margin-top: 0.9rem;
    border: none;
    color: #fff;
    font-size: 0.43rem;
  }
}

.login_title {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.2rem;
  .title {
    font-size: 0.66rem;
  }
  .desc {
    margin-top: 0.32rem;
    font-size: 0.42rem;
    color: #909399;
  }
}
.login_footer {
  font-size: 0.13rem;
  margin-top: 0.23rem;
  .right {
    float: right;
    color: #909399;
    font-size: 0.37rem;
  }
}
</style>
